import React, { Component } from 'react';

class Son extends Component {
    componentDidMount () {
        console.log('son: componentDidMount');
    }

    componentDidUpdate (prevProps, prevState) {
        console.log('子组件更新', prevProps, prevState);
    }

    shouldComponentUpdate (nextProps, nextState) {
        // 根据父组件传递过来的值(修改后的值, 和上次的值) 来判断是否更新视图
        console.log(nextProps, nextState, this.props);
        return nextProps.count !== this.props.count;
    }
    componentWillUnmount () {
        console.log('son: componentWillUnmount');
    }
    render () {
        return (
            <div>
                父组件传递过来的值: {this.props.count}
                <br/>
                修改父组件传递过来的值:
                <button onClick={() => this.props.click()}>click</button>
            </div>
        );
    }
}

export default class propsUpdate extends Component {
    state = {
        count: 0
    }
    componentDidMount () {
        console.log('father: componentDidMount');
    }
    render () {
        return (
            <div>
                父组件自己的值: {this.state.count}
                <br/>
                <Son {...this.state} click={() => this.setState((pre) => ({ count: pre.count + 1 }))} />
            </div>
        );
    }
}
